<template>
  <div>
    <van-nav-bar
      left-text="取消"
      @click-left="goBack"
      @click-right="save"
    />
    <van-cell-group v-if="listData.length>0">
      <draggable v-model="listData">
          <transition-group>
            <van-cell v-for="(item,index) in listData" :key="index" >
              <template slot="title">
                <i class="iconfont icon-delete del-botton" @click="del(item,index)"></i>
                <van-field v-model="listData[index]" icon="wap-nav"/>
              </template>
            </van-cell>
          </transition-group>
      </draggable>
    </van-cell-group>
    <div v-else class="notice">尚未添加常用语</div>
    <div class="add-botton" @click="add">
      <van-icon name="add-o" style="vertical-align: middle;"/>
      添加分组
      </div>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    data() {
      return {
        listData: []
      }
    },
    methods: {
      getList() {
        this.listData = ['未分组','心脏病', '高血压']
      },
      goBack() {
        this.$router.push({name: 'groupList'})
      },
      add() {
        this.$router.push({name: 'groupAdd'})
      },
      save() {
        
      },
      del(value,index) {
        this.listData.splice(index,1)
      }
    },
    created() {
      this.getList()
    }
  }
</script>
<style lang="less">
.notice {
  text-align: center;
  margin-top: 10rem;
}
.add-botton {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  text-align: center;
  font-size: 1.2rem;
  color: #38f;
}
.del-botton {
  position: absolute;
  left: 1.6rem;
  top: 1.4rem;
  z-index: 1;
  color: #f00;
}
.van-field__body {
  padding-left: 1rem;
}
</style>